<template>
    <div id="expertMessage">
        <div class="card">
            <ul>
                <li>编号：{{expert.id}}</li>
                <li>姓名：{{expert.name}}</li>
                <li>专长：{{expert.specialty}}</li>
                <li>单位：{{expert.company}}</li>
            </ul>
        </div>
        <div class="message">
            <ul>
                <li><span>姓名:  </span><el-input  v-model="expert.name" :placeholder="expert.name"></el-input></li>
                <li><span>性别:  </span><el-input v-model="expert.sex" :placeholder="expert.sex"></el-input></li>
                <li><span>手机号:  </span><el-input v-model="expert.mobile" :placeholder="expert.mobile"></el-input></li>
                <li><span>电子邮箱:  </span><el-input v-model="expert.email" :placeholder="expert.email"></el-input></li>
                <li><span>单位地址:  </span><el-input v-model="expert.company" :placeholder="expert.company"></el-input></li>
                <li><span>简介:  </span></li>
                <li><textarea v-model="expert.description" :placeholder="expert.description"></textarea></li>
                <li><el-button type="primary" @click="xg()">修改</el-button></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dat:[],
                expert: {
                    id:1,
                    name: '张三',
                    sex:'男',
                    mobile: '12345678901',
                    email: '12345@qq.com',
                    company: '山东省千佛山医院',
                    specialty: '心血管',
                    description:'大家好'
                }
            };
        },
        created() {

            // this.dat = this.$store.state.dat
            // let id=window.sessionStorage.getItem('id');
            // this.expert.name=this.dat[id].Name
            // this.expert.sex=this.dat[id].Sex
            // this.expert.company=this.dat[id].Company
            // this.expert.email=this.dat[id].Email
            // this.expert.mobile=this.dat[id].Phone
            // this.expert.description=this.dat[id].description

            let id=window.sessionStorage.getItem('id');
            this.expert.name=this.$store.getters.getDat[id].Name
            this.expert.sex=this.$store.getters.getDat[id].Sex
            this.expert.company=this.$store.getters.getDat[id].Company
            this.expert.email=this.$store.getters.getDat[id].Email
            this.expert.mobile=this.$store.getters.getDat[id].Phone
            this.expert.description=this.$store.getters.getDat[id].description


           /* this.expert.name=window.sessionStorage.getItem('yhm')
            this.expert.company=window.sessionStorage.getItem('dw')
            this.expert.email=window.sessionStorage.getItem('Email')
            this.expert.mobile=window.sessionStorage.getItem('userName')
            this.expert.description=window.sessionStorage.getItem('description')
*/
        },
        methods: {
            submitForm(formName) {
            },
            xg(){
                let id=window.sessionStorage.getItem('id');

                this.$store.state.dat[id].Name=this.expert.name
                this.$store.state.dat[id].Sex=this.expert.sex
                this.$store.state.dat[id].Phone=this.expert.mobile
                this.$store.state.dat[id].Email=this.expert.email
                this.$store.state.dat[id].Company=this.expert.company
                this.$store.state.dat[id].description=this.expert.description

                console.log('修改成功');
                // this.$router.push({'path':'/loginH/grzx'})

                // sessionStorage.setItem('userName',this.expert.mobile)
                // sessionStorage.setItem('yhm',this.expert.name)
                // sessionStorage.setItem('dw',this.expert.Company)
                // sessionStorage.setItem('Email',this.expert.Email)
                // sessionStorage.setItem('description',this.expert.description)
                // console.log('修改成功');
                // this.$router.push({'path':'/loginH/grzx'})
            }

        }
    }
</script>

<style >
    #expertMessage {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    #expertMessage  .card {
        flex: 1;
        background-image: url(../../assets/images/card.png);
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 150px;
        padding-left: 100px;
        text-align: left;
        font-size: 15px;
        text-shadow: 0 0 5px #ffffff, 0 0 5px #c5e2b1;
        margin-bottom: 10px;
    }
    .card{
        margin: 0 auto;
    }
    #expertMessage .message {
        width:60%;
    }
    #expertMessage .message ul li {
        line-height: 50px;
        padding-left: 50px;
        text-align: left;
    }
    #expertMessage .message ul li span {
        font-weight: bold;
        color: #000;
        width: 100px;
    }
    textarea{
        width: 330px;
        height: 100px;
        resize:none;
    }
    .message el-input{
        width: 60px;
    }
</style>
